<script setup>
import { ref, onMounted, computed } from 'vue'
import { getOtuhpv } from '@/apis/apis.js'
const hpv_select = ref([])
const hpv_list = ref([])
const select_hpv_list = ref([])
const activeIndex = ref(0)
const handleSelect = (item, index) => {
  if (item.name === '全部') {
    select_hpv_list.value = hpv_list.value
  }
  else {
    select_hpv_list.value = hpv_list.value.filter(value => value.hpv_id === item._id)
  }
  activeIndex.value = index
}
const handleToBuy = (item) => {
  const params = JSON.stringify({
    _id: item._id,
    name: item.name,
    describe: item.describe,
    price: item.price
  })
  uni.navigateTo({ url: `/pages/hpv-vaccine/hpv-buy?params=${params}` })
}
onMounted(async () => {
  const res = await getOtuhpv()
  console.log(res)
  hpv_select.value = res.data[0].hpv_select
  hpv_list.value = res.data[0].hpv_list
  select_hpv_list.value = res.data[0].hpv_list
})
</script>

<template>
  <view class="view">
    <image class="view-image" src="/static/images/gongjinai.jpg" mode="widthFix"></image>
    <view class="view-menu">
      <view class="view-menu-item" :class="{ active: activeIndex === index }" v-for="(item, index) in hpv_select" :key="index" @click="handleSelect(item, index)">{{ item.name }}</view>
    </view>
    <view class="view-items">
      <view class="view-item" v-for="(item, index) in select_hpv_list" :key="index">
        <view class="view-item-left">
          <view class="view-item-left-name">{{ item.name }}</view>
          <view class="view-item-left-tags">
            <view class="view-item-left-tag" v-for="(describe, describeIndex) in item.describe" :key="describeIndex">{{ describe }}</view>
          </view>
          <view class="view-item-left-price">￥{{ item.price[0] }}-￥{{ item.price[1] }}</view>
        </view>
        <view class="view-item-right">
          <button class="view-item-right-button" size="mini" @click="handleToBuy(item)">去预约</button>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.view {
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 100vh;
  background-color: #f0f0f0;
  .view-image {
    width: 750rpx;
  }
  .view-menu {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    .view-menu-item {
      padding: 30rpx 0;
      &.active {
        border-bottom: 3px solid #4176e1;
      }
    }
  }
  .view-items {
    .view-item {
      display: flex;
      justify-content: space-between;
      margin: 20rpx;
      padding: 20rpx;
      background-color: #fff;
      border-radius: 20rpx;
      .view-item-left {
        .view-item-left-tags {
          display: flex;
          align-items: center;
          margin: 20rpx 0;
          font-size: 28rpx;
          .view-item-left-tag {
            margin-right: 10rpx;
            background-color: #f0f0f0;
          }
        }
        .view-item-left-price {
          color: red;
          font-size: 28rpx;
        }
      }
      .view-item-right {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        .view-item-right-button {
          background-color: #4176e1;
          border-radius: 100rpx;
          color: #fff;
        }
      }
    }
  }
}
</style>
